import React, { useState } from "react";
import { Table, Button } from "antd";
import type { ColumnsType } from "antd/es/table";
export default function TableTest() {
  const columns: ColumnsType<IUserItem> = [
    {
      title: "姓名", // title 属性是表头信息
      dataIndex: "name", // 渲染dataSource数据源中的哪个字段[属性]
    },
    {
      title: "年龄",
      dataIndex: "age",
    },
    {
      title: "住址",
      dataIndex: "address",
    },
    {
      title: "操作",
      /**
       *
       * @param value  当前行对象
       *        当有dataIndex属性的时候， value就是dataIndex指定的字段值
       *        没有dataIndex属性的时候， value就是   当前行对象
       * @param row   当前行对象
       * @param index 索引
       * @returns
       */
      dataIndex: "name",
      render(value: string, row: IUserItem, index: number) {
        // 自定义该列显示的内容
        console.log("value: ", value);
        console.log("row: ", row);
        console.log("index: ", index);
        return (
          <>
            <Button
              type="primary"
              danger
              onClick={() => {
                // delete(row.id)
              }}
            >
              删除
            </Button>
          </>
        );
      },
    },
  ];

  /**
   * 定义dataSource数据源的类型
   */
  interface IUserItem {
    id: number;
    name: string;
    age: number;
    address: string;
  }
  type IUserList = IUserItem[];
  // data 数据  source 资源  数据资源，要渲染的表格数据
  const dataSource: IUserList = [
    {
      id: 1,
      name: "胡彦斌",
      age: 32,
      address: "西湖区湖底公园1号",
    },
    {
      id: 2,
      name: "吴彦祖",
      age: 42,
      address: "西湖区湖底公园1号",
    },
    {
      id: 3,
      name: "胡歌",
      age: 39,
      address: "西湖区湖底公园1号",
    },
    {
      id: 4,
      name: "吴彦祖",
      age: 42,
      address: "西湖区湖底公园1号",
    },
    {
      id: 5,
      name: "胡歌",
      age: 39,
      address: "西湖区湖底公园1号",
    },
  ];
  let [current, setCurrent] = useState<number>(1); // 当前页
  let [pageSize, setPageSize] = useState<number>(2); // 每页几条
  let [total, setTotal] = useState<number>(5); // 总条数
  return (
    <div>
      <h3 style={{ textAlign: "center" }}>Table组件</h3>
      <Table
        rowKey="id" // 指定不重复的key值
        columns={columns}
        dataSource={dataSource}
        pagination={{
          current, // 当前页
          pageSize, // 每页显示几条
          total, // 总条数
          showSizeChanger: true, // 是否显示分页器
          showQuickJumper: true, // 是否显示分页跳转
          pageSizeOptions: [2, 3, 5, 10, 20], // 分页选择器，选择需要几条
          showTotal: (total: number) => {
            //展示总条数，由于是jsx语法，还可以写样式
            return <div>总条数： {total}</div>;
          },
          onChange(page: number, pageSize: number) {
            setCurrent(page);
            setPageSize(pageSize);
            setTotal(total);
          },
        }}
      />
    </div>
  );
}
